<!DOCTYPE html>
<html lang="en">
<head>
    <base id="base" href="${rc.contextPath}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>驴妈妈统计系统</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css"/>
    <!-- ace styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
          id="main-ace-style"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css"/>
    <!-- ace settings handler -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />

    <script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>

    <script src="${rc.contextPath}/assets/js/moment.min.js"></script>
    <script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${rc.contextPath}/javascripts/daterangepicker.js"></script>

    <style>
        th {
            text-align: center;
        }
        #deleteRedisKeysDiv {
            float: right;
            margin-right: 6px;
        }
    </style>

    <script>
        //设置选择的时间
        function selectTime(selectedTime) {
            $('#overviewDay').val(selectedTime);
            $("#overviewDaySearch").val(selectedTime);
            $("#customChooseTime").val(null);
        };
    </script>

</head>

<body class="skin-2" style="background-color: #FFF;">
<#if flag??>
    <#if flag =='1'>
        <ul class="pager">
            <li class="previous">
                <a href="javascript:;" onclick="history.go(-1)">← 返回</a>
            </li>
        </ul>
    </#if>
    <#if flag =='2'>
        <ul class="pager">
            <li class="previous">
                <a href="javascript:;" onclick="backToCategoryRate()">← 返回</a>
            </li>
        </ul>
    </#if>
</#if>
<div class="tabbable">
    <div class="tab-content">
        <div id="manage" class="tab-pane active in">
            <div class="row">
                <div class="col-xs-12">
                    <!-- 筛选条件开始 -->
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 class="widget-title" style="font-size: 14px; color: #333; font-weight: 700;">点评列表</h4>
                                </div>
                                <div class="widget-body" style="background-color: #EFF3F8;">
                                    <div class="widget-main">
                                        <form class="form-inline" id="searchForm">
                                            <div class="form-group">
                                                <label>选择时段
                                                    <input type="text" name="chooseTime" style="height: 33px; font-size: 14px; font-weight: normal; vertical-align: middle; font-family: inherit;" id="chooseTime"
                                                           class="form-control time">
                                                    <button id="searchDay" type="button"
                                                            onclick="replaceDate(this,'1');selectTime('1');"
                                                            class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        <span style="font-size: 14px;">昨日</span>
                                                    </button>
                                                    <button id="searchWeek" type="button"
                                                            onclick="replaceDate(this,'7');selectTime('7');"
                                                            class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        <span style="font-size: 14px;">过去7天</span>
                                                    </button>
                                                    <button id="searchMonth" type="button"
                                                            onclick="replaceDate(this,'31');selectTime('31');"
                                                            class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        <span style="font-size: 14px;">过去31天</span>
                                                    </button>
                                                </label>
                                                <label style="margin-left: 15px;">产品ID
                                                    <input type="text" id="productId" name="productId"
                                                           placeholder="输入产品ID" style="width: 120px;">
                                                </label>
                                                <label style="padding-left: 15px;">品类
                                                    <select class="chosen-select" name="categoryId" id="categoryId">
                                                        <#list categories as cate>
                                                            <option value="${cate.value}" <#if categoryId?? && categoryId == cate.value>selected</#if>>${cate.showName!""}</option>
                                                        </#list>
                                                    </select>
                                                </label>
                                                <label style="margin-left: 15px;">评价
                                                    <select data-placeholder="" class="chosen-select" id="senseType" name="senseType">
                                                        <#list comments as comment>
                                                            <option value="${comment.value}" <#if senseType?? && senseType?number == comment.value>selected</#if>>${comment.showName!""}
                                                            </option>
                                                        </#list>
                                                    </select>
                                                </label>
                                                <button id="commentSearch" type="button" class="btn btn-pink btn-sm"
                                                        style="margin-left: 50px; font-size: 14px;">
                                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                                    Search
                                                </button>

                                                <input type="hidden" id="overviewDay" class="form-control" value="${overviewDay!''}" />
                                                <input type="hidden" id="overviewDaySearch" class="form-control" value="${overviewDay!''}" />
                                                <input type="hidden" id="rangeName" value="${rangeName!''}" />
                                                <input type="hidden" id="productName" value="${productName!''}" />
                                                <input type="hidden" id="customChooseTime" value="${chooseTime!''}" class="form-control">
                                                <input type="hidden" id="customChooseTimeSearch" value="${chooseTime!''}" class="form-control">
                                                <input type="hidden" id="selectedTime" value="${overviewDay!''}" class="form-control">
                                                <input type="hidden" id="categoryName" value="${categoryName!''}" class="form-control" />
                                                <input type="hidden" id="sortColumn" value="zanNum" class="form-control" />
                                                <input type="hidden" id="sortType" value="2" class="form-control" />
                                            </div>
                                            <div id="deleteRedisKeysDiv">
                                                <button id="deleteRedisKeys" type="button" class="btn btn-danger btn-sm"
                                                        style="font-size: 14px;">
                                                    <span class="ace-icon fa fa-trash-o bigger-110"></span>
                                                    清除缓存
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 筛选条件结束 -->
                    <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer" style="height: 130px;">
                        <table id="commentTable"
                               class="table table-striped table-bordered table-hover dataTable no-footer"
                               aria-describedby="dynamic-table_info">
                            <thead>
                            <tr>
                                <th style="width:75px;">No.</th>
                                <th style="width:120px; white-space: nowrap;">所属品类</th>
                                <th style="width:300px;">产品名称</th>
                                <th>评价内容</th>
                                <th style="width:85px;" id="dateNum" class="sorting" onclick="changeFlag(this, 4)">点评距离下单天数</th>
                                <th style="width:80px;" id="zanNum" class="sorting" onclick="changeFlag(this, 5)">点赞量</th>
                                <th style="width:80px;">情感极性</th>
                                <th style="width:80px;">观点提取</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                    <input type="text" id="currentPage" hidden="true" value=1>
                    <input type="text" id="pageSize" value =10 hidden="true">
                    <input type="text" id="pageTotal" hidden="true">

                    <!-- 分页 -->
                    <#if page??>
                        <div class="ui-jqgrid" style="display: none;">
                            <div id="grid-pager"
                                 class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
                                 dir="ltr">
                                <div id="pg_grid-pager" class="ui-pager-control" role="group">
                                    <table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
                                           style="width: 100%; table-layout: fixed; height: 100%;" role="row"
                                           id="prePageTable">
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </#if>
                    <!-- 分页结束 -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 弹窗	 -->
<div class="row">
    <div class="col-xs-12">
        <button class="btn btn-info" data-toggle="modal" type="button" style="display:none;" id="viewpointList"
                data-target="#myModal"></button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" id="modal-dialog">
                <div class="modal-content">
                    <div id="chartMore">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;
                            </button>
                            <h3 class="modal-title" id="funnelLabel">观点提取：</h3>
                        </div>
                        <div class="modal-body">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small" style="color:#000;font-size: 14px;">
                                    <span>点评内容：</span>
                                    <h5 style="line-height: 20px;padding-left: 20px;color:#ed6d5c;">
                                        <span id="contentWindow"></span>
                                    </h5>
                                    <table style="border: 1px solid #61a5e8;" id="viewPointTable">
                                        <thead>
                                        <tr>
                                            <th style="width:50px;">No.</th>
                                            <th style="width:100px;">匹配属性词</th>
                                            <th style="width:200px;">匹配形容词</th>
                                            <th style="width:180px;" class="sorting">情感极性</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/user/base.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="${rc.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
<!-- ace scripts -->
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>

<script type="text/javascript">

    d3.select(self.frameElement).style("height", "1500px");

    $(document).ready(function () {

        $(".chosen-select").chosen();
        $(".chosen-select-deselect").chosen({ allow_single_deselect: true });
        $("#commentSearch").click();
    });

    $("#commentSearch").on("click", function () {
        searchComments(1, $("#pageSize").val(), 2);
    });

    $("#deleteRedisKeys").on("click", function () {
        $.ajax({
            url: '${rc.contextPath}/comment/deleteAllRedisKey',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                $("#deleteRedisKeys").attr("disabled", true);
            },
            success: function (data) {
                if (data != "" && data != null && (data == "true" || data == true)) {
                    alert("缓存删除成功!");
                } else {
                    alert("缓存删除失败!");
                    console.log(data);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("缓存删除失败!");
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
                console.log(errorThrown);
            },
            complete: function () {
                $("#deleteRedisKeys").attr("disabled", false);
            }
        });
    });

    $("#chooseTime").change(function () {
        $("#customChooseTime").val($("#chooseTime").val());
    });

    function searchComments(currentPage, pageSize, sortType) {

        openPartialLayer($("#dynamic-table_wrapper"));
        $("#commentSearch").attr("disabled", true);

        // 更改时间标签
        clickTimeLabel();
        var data = $("#searchForm").serializeArray();
        data.push({name: "currentPage", value: currentPage});
        data.push({name: "pageSize", value: pageSize});
        data.push({name: "sortType", value: sortType});
        data.push({name : "overviewDay", value : $("#overviewDay").val()});
        data.push({name : "rangeName", value : $("#rangeName").val()});
        data.push({name : "productName", value : $("#productName").val()});
        data.push({name: "sortColumn", value : $("#sortColumn").val()});

        $("#commentTable tbody").empty();
        $.ajax({
            url: '${rc.contextPath}/comment/getCommentList',
            contentType: "application/json; charset=utf-8",
            data: data,
            dataType: "json",
            success: function (data) {
                if (data != "" && data.list != "" && data.list != null) {
                    $("#dynamic-table_wrapper").css('height', '');
                    // 调整页码样式
                    changePageCss(data);
                    var html = "";
                    var contendNum = 0;
                    $.each(data.list, function (index, item) {
                        var prob = "";
                        if (item.senseType == "2") {
                            prob = item.positiveProb;
                        } else if (item.senseType == "0") {
                            prob = item.negativeProb;
                        }
                        var zan = item.zanNum;
                        if(zan == null) {
                            zan = 0;
                        }

                        var productName = item.productName;
                        if(typeof productName == "string") {
                            productName = productName.replace("\"", "");
                        }
                        html += "<tr>" +
                            "<td style=\"vertical-align: middle;\">" + (index + 1) + "</td>" +
                            "<td style=\"vertical-align: middle;\">" + item.categoryName + "</td>" +
                            "<td style=\"vertical-align: middle;\">" + productName + "</td>";
                        var contentShort = item.contentShort;
                        if(!isNull(contentShort)) {
                            var content = item.content;
                            contendNum++;
                            html += "<td id=\"contentTd" + contendNum + "\" data-content=\"" + content + "\" data-contentShort=\"" + contentShort + "\">" + contentShort +
                                "<a href=\"javascript:void(0)\" onclick=\"showContent("
                                + contendNum + ")\" style=\"font-size: 12px; color: #C6487E; vertical-align: middle;\">展开</a></td>";
                        } else {
                            html += "<td style=\"vertical-align: middle;\">" + item.content + "</td>";
                        }
                        html += "<td style=\"vertical-align: middle;\">" + item.dateNum + "</td>" +
                            "<td style=\"vertical-align: middle;\">" + zan + "</td>";

                        var senseTypeName = item.senseTypeName;
                        if(isNull(senseTypeName)) {
                            html += "<td></td>";
                        } else {
                            html += "<td style=\"vertical-align: middle;\">" + senseTypeName;
                            if(!isNull(prob)) {
                                html += "(" + prob + ")";
                            }
                            html += "</td>";
                        }

                        html += "<td style=\"vertical-align: middle;\"><div class=\"ui-pg-div\"><span class=\"ui-icon ace-icon fa fa-search-plus purple\" " +
                            "onclick='getViewPoint(" + item.productId + "," + item.commentId + "," + item.orderId + ");'></span></div></td>" +
                            "</tr>";
                    });
                    // 分页
                    setPage(data);
                } else {
                    html = '<tr><td colspan="8"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
                    $(".ui-jqgrid").hide();
                }
                $("#commentTable tbody").html(html);

                // 更改时间标签样式
                changeTimeLabelCss();

                if(!isNull($("#productName").val())){
                    $("#productId").val(data.list[0].productId);
                }
                $("#productName").val("");
                $("#overviewDay").val("");
                $("#rangeName").val("");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
                console.log(errorThrown);
                window.location.href = "${rc.contextPath}/500.html";
            },
            complete: function () {
                removeLoading($("#dynamic-table_wrapper"));
                $("#commentSearch").attr("disabled", false);
            }
        });
    }

    function changePageCss(data) {
        if (data.pages > 1) {
            $("#currentPage").val(data.pageNum);
            $(".ui-jqgrid").show();
        } else {
            $(".ui-jqgrid").hide();
        }
    }

    function showContent(contendNum) {
        var content = document.getElementById("contentTd" + contendNum).getAttribute("data-content");
        $("#contentTd" + contendNum).empty();
        var html = "<br/><a href=\"javascript:void(0)\" style=\"font-size: 12px; color: #C6487E;\" onclick=\"hideContent(" + contendNum + ")\">收起</a>";
        $("#contentTd" + contendNum).html(content + html);
    }

    function hideContent(contendNum) {
        var contentShort = document.getElementById("contentTd" + contendNum).getAttribute("data-contentShort");
        $("#contentTd" + contendNum).empty();
        var html = "<a href=\"javascript:void(0)\" onclick=\"showContent(" + contendNum + ")\" style=\"font-size: 12px; color: #C6487E;\">展开</a>";
        $("#contentTd" + contendNum).html(contentShort + html);
    }

    function changeTimeLabelCss () {
        var overviewDay = $("#overviewDay").val();
        var selectedDate = getSelectedDate();
        if(isNull(overviewDay)){
            return;
        }
        if(overviewDay == 365) {
            $("#" + selectedDate).removeClass("btn-info");
            setCustomChooseTime(365);
        }
        if(overviewDay == 15) {
            $("#" + selectedDate).removeClass("btn-info");
            setCustomChooseTime(15);
        }
    }

    var setCustomChooseTime = function(days){
        //设置输入框的时间
        var startDate = new Date(new Date().getTime()-days*1000*60*60*24);
        var endDate = new Date(new Date().getTime()-1*1000*60*60*24);
        var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
        $('#chooseTime').val(dateStr);
    };

    function clickTimeLabel() {
        var overviewDay = $("#overviewDay").val();
        var chooseTime = $("#customChooseTime").val();
        if(chooseTime){
            $("#chooseTime").val(chooseTime);
            $(".btn.btn-white.btn-sm.btn-info").removeClass("btn-info");

            if (!isNull(overviewDay)) {
                setDateLabelCss(overviewDay);
            } else if(!isNull($("#overviewDaySearch").val()) && $("#chooseTime").val() == $("#customChooseTimeSearch").val()) {
                var overviewDaySearch = $("#overviewDaySearch").val();
                setDateLabelCss(overviewDaySearch);
            }
        } else if(overviewDay) {
            setDateLabelCss(overviewDay);
        }
    }

    function setDateLabelCss(overviewDay) {
        if (overviewDay == 1) {
            $("#searchDay").click();
        } else if (overviewDay == 7) {
            $("#searchWeek").click();
        } else if (overviewDay == 31) {
            $("#searchMonth").click();
        } else if(overviewDay == 15) {
            var startDate = new Date(new Date().getTime() - 15 * 1000 * 60 * 60 * 24);
            var endDate = new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24);
            var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
            var selectbtn = getSelectedDate();
            $("#" + selectbtn).removeClass("btn-info");
            $("#chooseTime").val(dateStr);
        }
    }

    function isNull(str) {
        if(null == str || "" == str || (typeof str == "string" && str.trim() == "")) {
            return true;
        }
        return false;
    }

    function getSelectedDate() {
        var timebtn1 = $("#searchDay").attr("class");
        var timebtn2 = $("#searchWeek").attr("class");
        var timebtn3 = $("#searchMonth").attr("class");
        if(timebtn1.indexOf("btn-info") != -1) {
            return "searchDay";
        } else if(timebtn2.indexOf("btn-info") != -1) {
            return "searchWeek";
        } else if(timebtn3.indexOf("btn-info") != -1) {
            return "searchMonth";
        }
        return "";
    }

    // 翻页
    function showPage(param) {
        var pages = parseInt($("#sp_1_grid-pager")[0].innerText);
        var currentPage = parseInt($("#currentPage").val());
        var pageSize = $("#pageSize").val();
        var flag = 0;
        if ('firstPage' == param) {
            currentPage = 1;
        } else if ('prePage' == param) {
            if (currentPage == 1) {
                currentPage == 1;
                flag = 1;
            } else {
                currentPage = currentPage - 1;
            }
        } else if ('nextPage' == param) {
            if (currentPage == pages) {
                currentPage = pages;
                flag = 1;
            } else {
                currentPage = currentPage + 1;
            }
        } else if ('lastPage' == param) {
            currentPage = pages;
        }
        if (flag == 0) {
            searchComments(currentPage, pageSize, $("#sortType").val());
        }
    }

    // 排序
    function changeFlag(obj, num) {
        var sortName = $(obj).attr("class");
        var pageSize = $("#pageSize").val();
        var sortColumn = $(obj).attr("id");

        if(!isNull(sortColumn) && sortColumn != $("#sortColumn").val()) {
            var a = $("#sortColumn").val();
            $("#" + a).attr("class", "sorting");
        }

        $("#sortColumn").val(sortColumn);
        if (sortName == "sorting" || sortName == "sorting_asc") {
            $("#dynamic-table_wrapper #commentTable th").eq(num).attr("class", "sorting_desc");
            $("#sortType").val(1);
            searchComments(1, pageSize, 1);
        } else if (sortName == "sorting_desc") {
            $("#dynamic-table_wrapper #commentTable th").eq(num).attr("class", "sorting_asc");
            $("#sortType").val(2);
            searchComments(1, pageSize, 2);
        }
    }

    /**
     * 观点提取
     * @param productId 产品ID
     * @param commentId 评论ID
     * @param orderId 订单号
     */
    function getViewPoint(productId, commentId, orderId) {
        //展示遮罩层
        $("#contentWindow").empty();
        $("#viewPointTable tbody").empty();
        // 查询 观点提取
        getViewFromContent(productId, commentId, orderId);
        $("#viewpointList").click();
    }

    function getViewFromContent(productId, commentId, orderId) {

        var data = [];
        data.push({name: "productId", value: productId});
        data.push({name: "commentId", value: commentId});
        data.push({name: "orderId", value: orderId});
        $.ajax({
            url: '${rc.contextPath}/comment/getViewPoint',
            dataType: "json",
            data: data,
            success: function (data) {
                var html = "";
                if (data != null && data.length > 0) {

                    $("#contentWindow").html(data[0].content);
                    var num = 1;
                    $.each(data, function (index, item) {
                        html += "<tr style=\"height:40px;\"><td>" + num + "</td><td>" + item.prop
                            + "</td><td>" + item.adj + "</td><td>" + item.sentimentName + "</td>" + "</tr>";
                        num++;
                    });
                } else {
                    html = '<tr><td colspan="4"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
                }
                $("#viewPointTable tbody").append(html);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
                console.log(errorThrown);
                window.location.href = "${rc.contextPath}/500.html";
            }
        });
    }

    var backToCategoryRate = function () {
        var selectedTime = $('#selectedTime').val();
        var categoryName = $("#categoryName").val();
        if(!isNull(categoryName) && typeof categoryName == "string" && categoryName.indexOf("+") != -1) {
            categoryName = categoryName.replace("+", "%2B");
        }
        var url = "${rc.contextPath}/category/favorcomp?selectedTime=" + selectedTime
            + "&categoryId=" + $("#categoryId").val() +"&chooseTime=" + $("#customChooseTimeSearch").val()
            + "&categoryName=" + categoryName;
        window.location.href = url;
    }

    // 分页
    function setPage(data) {
        var pageHtml = "<tr><td id=\"grid-pager_left\" align=\"left\"></td>" +
            "<td id=\"grid-pager_center\" align=\"center\"  style=\"white-space: pre; width: 343px;\">" +
            "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" " +
            "style=\"table-layout: auto; margin-top: 10px;\" class=\"ui-pg-table\"><tbody>" +
            "<tr><td id=\"first_grid-pager\" onclick=\"showPage('firstPage')\" " +
            "class=\"ui-pg-button ui-corner-all ";

        if(data.isFirstPage) {
            pageHtml += "ui-state-disabled";
        }

        pageHtml += "\" style=\"cursor: pointer;\"><span " +
            "class=\"ui-icon ace-icon fa fa-angle-double-left bigger-140\"></span></td>" +
            "<td id=\"prev_grid-pager\" onclick=\"showPage('prePage')\" " +
            "class=\"ui-pg-button ui-corner-all ";

        if(data.isFirstPage) {
            pageHtml += "ui-state-disabled";
        }

        pageHtml += "\" style=\"cursor: pointer;\"><span " +
            "class=\"ui-icon ace-icon fa fa-angle-left bigger-140\"></span></td>" +
            "<td dir=\"ltr\">Page <input class=\"ui-pg-input\" id=\"page_num\" " +
            "type=\"text\" size=\"2\" maxlength=\"7\" disabled=\"true\" " +
            "value=\"" + data.pageNum + "\" role=\"textbox\"> of <span " +
            "id=\"sp_1_grid-pager\">" + data.pages + "</span></td>" +
            "<td id=\"next_grid-pager\" onclick=\"showPage('nextPage')\" " +
            "class=\"ui-pg-button ui-corner-all ";

        if(data.isLastPage) {
            pageHtml += "ui-state-disabled";
        }

        pageHtml += "\" style=\"cursor: pointer;\"><span " +
            "class=\"ui-icon ace-icon fa fa-angle-right bigger-140\"></span></td>" +
            "<td id=\"last_grid-pager\" onclick=\"showPage('lastPage')\" " +
            "class=\"ui-pg-button ui-corner-all ";

        if(data.isLastPage) {
            pageHtml += "ui-state-disabled";
        }

        pageHtml += "\" style=\"cursor: pointer;\"><span " +
            "class=\"ui-icon ace-icon fa fa-angle-double-right bigger-140\"></span></td>" +
            "</tr></tbody></table></td><td id=\"grid-pager_right\" align=\"right\">" +
            "<div dir=\"ltr\" style=\"text-align: right; margin-top: 10px;\" class=\"ui-paging-info\">View " +
            "<span id=\"view_start_row\">" + data.startRow + "</span> - <span id=\"view_end_row\">" +
            data.endRow + "</span> of <span id=\"view_page_total\">" +
            data.total + "</span></div></td></tr>";

        $("#prePageTable tbody").html(pageHtml);
    }

</script>
</body>
</html>